
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/css/weui.css">
    <script type="text/javascript" src="/js/weui.js"></script>
    <link rel="stylesheet" href="/js/weui.css" />
</head>
<script src="../zepto.min.js"></script>
<script>
    $(function(){


    });
</script>
</head>
<style>
    .weui_label {
        display: block;
        width: 4em;
    }
</style>
<body ontouchstart style="background-color: #f8f8f8;">
<div class="weui_cells_title">添加车辆信息</div>
<div class="weui_cells weui_cells_form">
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">车牌号</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" placeholder="请输入车牌号"/>
        </div>
    </div>

    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">排量</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" placeholder="请输入排量"/>
        </div>
    </div>

    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">传动类型</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" placeholder="请输入传动类型"/>
        </div>
    </div>

    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">车辆类型</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" placeholder="请输入类型"/>
        </div>
    </div>

    <div class="weui_cell">
        <div class="weui_cell_hd"><label for="" class="weui_label">上牌日期</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value=""/>
        </div>
    </div>

    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" placeholder="请输入姓名"/>
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="tel" required pattern="[0-9]{11}" maxlength="11" placeholder="输入你现在的手机号" emptyTips="请输入手机号" notMatchTips="请输入正确的手机号">
        </div>
        <div class="weui_cell_ft">
            <i class="weui_icon_warn"></i>
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" placeholder="请输入备注" type="text">
        </div>
    </div>

</div>

<div class="container">
    <div class="weui_cells weui_cells_form">
        <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
                <div class="weui_uploader">
                    <div class="weui_uploader_hd weui_cell">
                        <div class="weui_cell_bd weui_cell_primary">上传车辆照片</div>
                        <div class="weui_cell_ft js_counter">0/6</div>
                    </div>
                    <div class="weui_uploader_bd">
                        <ul class="weui_uploader_files">
                            <!-- 预览图插入到这 --> </ul>
                        <div class="weui_uploader_input_wrp">
                            <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    $(function(){
        var max = $('#count_max').text();
        $('#textarea').on('input', function(){
            var text = $(this).val();
            var len = text.length;
            $('#count').text(len);
            if(len > max){
                $(this).closest('.weui_cell').addClass('weui_cell_warn');
            }
            else{
                $(this).closest('.weui_cell').removeClass('weui_cell_warn');
            }
        });
    })
</script>



<label for="weuiAgree" class="weui-agree">
    <input id="weuiAgree" class="weui-agree-checkbox" type="checkbox">
            <span class="weui-agree-text">
                阅读并同意<a href="javascript:void(0);">《相关条款》</a>
            </span>
</label>
<div class="weui_btn_area">
    <a id="formSubmitBtn" href="javascript:" class="weui_btn weui_btn_primary">提交</a>
</div>
</form>
<script>
    var $form = $("#form");
    $form.form();
    $("#formSubmitBtn").on("click", function(){
        $form.validate(function(error){
            if(error){

            }else{
                $.toptips('验证通过提交','ok');
            }
        });

    });
</script>
<script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script>
    $.weui = {};
    $.weui.alert = function(options){
        options = $.extend({title: '警告', text: '警告内容'}, options);
        var $alert = $('.weui_dialog_alert');
        $alert.find('.weui_dialog_title').text(options.title);
        $alert.find('.weui_dialog_bd').text(options.text);
        $alert.on('touchend click', '.weui_btn_dialog', function(){
            $alert.hide();
        });
        $alert.show();
    };

    $(function () {
        // 允许上传的图片类型
        var allowtypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        // 1024kb，也就是 1mb
        var maxsize = 1024 * 1024;
        // 图片最大宽度
        var maxwidth = 300;
        // 最大上传图片数量
        var maxcount = 6;
        $('.js_file').on('change', function (event) {
            var files = event.target.files;

            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }

            for (var i = 0, len = files.length; i < len; i++) {
                var file = files[i];
                var reader = new filereader();

                // 如果类型不在允许的类型范围内
                if (allowtypes.indexof(file.type) === -1) {
                    $.weui.alert({text: '该类型不允许上传'});
                    continue;
                }

                if (file.size > maxsize) {
                    $.weui.alert({text: '图片太大，不允许上传'});
                    continue;
                }

                if ($('.weui_uploader_file').length >= maxcount) {
                    $.weui.alert({text: '最多只能上传' + maxcount + '张图片'});
                    return;
                }

                reader.onload = function (e) {
                    var img = new image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = math.min(maxwidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createelement('canvas');
                        var ctx = canvas.getcontext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawimage(img, 0, 0, w, h);
                        var base64 = canvas.todataurl('image/png');

                        // 插入到预览区
                        var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
                        $('.weui_uploader_files').append($preview);
                        var num = $('.weui_uploader_file').length;
                        $('.js_counter').text(num + '/' + maxcount);

                        // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信jssdk上传

                        var progress = 0;
                        function uploading() {
                            $preview.find('.weui_uploader_status_content').text(++progress + '%');
                            if (progress < 100) {
                                settimeout(uploading, 30);
                            }
                            else {
                                // 如果是失败，塞一个失败图标
                                //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');
                                $preview.removeclass('weui_uploader_status').find('.weui_uploader_status_content').remove();
                            }
                        }
                        settimeout(uploading, 30);
                    };

                    img.src = e.target.result;
                };
                reader.readasdataurl(file);
            }
        });
    });
    //# sourceurl=pen.js
</script>
</body>
</html>
